<template>
  <header class="header">
    <h1>todos</h1>
    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      v-model="isAll"
    >
    <label v-show="arr.length" for="toggle-all"></label>
    <!-- 3.0 @keyup.enter 监听用户按下回车  -->
    <!-- 3.1 v-model      双向绑定获取输入框的值  -->
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model.trim="task"
      @keyup.enter="downFn"
    />
  </header>
</template>

<script>
export default {
  data() {
    return {
      task: "",
    };
  },
  methods: {
    downFn() {
      if (this.task === "") {
        return alert("请输入任务名称");
      }
      // console.log("用户按下了回车键", this.task);
      // 3.2(重要) - 当前任务名字要加到list数组里
      this.$emit("create", this.task);
      // 为了更好的体验，清空输入框
      this.task = "";
    },
  },
  props: ['arr'],
  computed: {
    isAll:{
      get(){
        // 计算出 isAll 的状态，应用到全选框中
        return this.arr.every(item=>item.isDone === true)
      },
      set(val){
        // isAll 状态改变时，修改所有小选框的状态
        this.arr.forEach(item=>item.isDone = val)
      }
    }
  }
};
</script>